<template>
  <!--  <div className="ms-video">-->
  <!--    <video id="video1" controls="controls">-->
  <!--      <source src="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.m4v" type="video/mp4">-->
  <!--    </video>-->

  <div class="ms-video">
    <div class="video-wrap">
      <video
        controls="controls"
        autoplay="autoplay"
        loop="loop"
        poster="assets/video/Penguins_of_Madagascar.jpg"
      >
        <source
          src="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.m4v"
          type="video/mp4"
        />
        <source
          src="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.webm"
          type="video/webm"
        />
        <source
          src="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.ogv"
          type="video/ogg"
        />
        <source
          src="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4"
        />
        <object
          type="application/x-shockwave-flash"
          data="https://easyhtml5video.com/assets/video/flashfox.swf"
          style="position: relative"
          width="1280"
          height="720"
        >
          <param name="movie" value="assets/video/flashfox.swf" />
          <param name="allowFullScreen" value="true" />
          <param
            name="flashVars"
            value="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=https://easyhtml5video.com/assets/video/Penguins_of_Madagascar.jpg&amp;src=Penguins_of_Madagascar_TRAILER_2_%25282014%2529_Benedict_Cumberbatch_Animated_Movie_HD.m4v"
          />
          <embed
            src="https://easyhtml5video.com/assets/video/flashfox.swf"
            style="position: relative"
            flashvars="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=https://easyhtml5video.com/assets/video/Penguins_of_Madagascar.jpg&amp;src=https://easyhtml5video.com/Penguins_of_Madagascar_TRAILER_2_%25282014%2529_Benedict_Cumberbatch_Animated_Movie_HD.m4v"
            allowfullscreen="true"
            wmode="transparent"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer_en"
            width="1280"
            height="720"
          />
          <img
            alt="Penguins of Madagascar TRAILER 2 (2014) Benedict Cumberbatch Animated Movie HD"
            src="https://easyhtml5video.com/assets/video/Penguins_of_Madagascar.jpg"
            style="position: absolute; left: 0"
            title="Video playback is not supported by your browser"
            width="100%"
          />
        </object>
      </video>
      <span
        ><a href="https://mobirise.com/video-background/"
          >html5 video background</a
        ></span
      >
    </div>
    <ul
      style="
        position: absolute;
        display: none;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        background: rgb(255, 255, 255) none repeat scroll 0% 0%;
        cursor: pointer;
        box-shadow: rgb(49, 49, 49) 2px 2px 10px;
      "
    >
      <li style="margin: 0px; padding: 3px 20px; display: none">Pause</li>
      <li style="margin: 0px; padding: 3px 20px; display: block">Play</li>
      <li style="margin: 0px; padding: 3px 20px; display: block">Mute</li>
      <li style="margin: 0px; padding: 3px 20px; display: none">Unmute</li>
    </ul>
  </div>
  <!--  </div>-->
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
  name: "MsVideo",
})
export default class MsVideo extends Vue {}
</script>

<style lang="less" scoped>
.ms-video {
  video {
    width: 100%;
    border-radius: 20px;
  }
}
</style>
